<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-01 09:37:12 
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-01-21 10:28:26
 * @Description: 登录页面
 -->
<template>
  <div v-if="!reload" class="login-container">
    <img src="@/assets/img/login/login_bg.svg" class="login-bg" />
    <div class="login-left-section flex flex-vcenter">
      <div
        v-if="!reLoginVisible"
        class="login-form-container"
        :class="{ captcha: showCaptcha }"
      >
        <div>
          <div style="width: 340px; margin-bottom: 48px; text-align: center">
            <img class="login-logo" src="@/assets/img/login/logo-orange.png" />
          </div>

          <div v-if="!erCodeVisible">
            <div v-if="!showSms && showPhone">
              <fks-tabs v-model="loginType" class="form-tab" stretch>
                <fks-tab-pane
                  class="tab-label"
                  :label="LANG.ACCOUNT"
                  name="STANDARD"
                >
                  <account-login />
                </fks-tab-pane>
                <fks-tab-pane class="tab-label" :label="LANG.SMS" name="SMS">
                  <tel-Login />
                </fks-tab-pane>
              </fks-tabs>
            </div>
            <div v-if="!showPhone || (showPhone && showSms)">
              <account-login @openReLogin="openReLogin" />
            </div>
          </div>
          <div v-if="erCodeVisible">
            <er-code :code-val="codeVal" />
          </div>
          <third-party
            v-if="$store.state.loginStrategy.extraWay"
            :er-code-visible="erCodeVisible"
            @changeLoginType="changeLoginType"
            @toAccountLogin="toAccountLogin"
            @toPhoneLogin="toPhoneLogin"
          />
        </div>
      </div>
      <re-login
        v-if="reLoginVisible"
        :data.sync="reLoginData"
        :visible.sync="reLoginVisible"
      />
    </div>
  </div>
</template>
<script>
import ThirdParty from './components/ThirdParty'
import ErCode from './components/ErCode'
import ReLogin from './Relogin'
import AccountLogin from './components/AccountLogin'
import TelLogin from './components/TelLogin'
import { mapState } from 'vuex'
import * as stateTypes from '@/store/State/stateTypes'
import { CLEAN_DATA } from '@/store/Action/actionTypes'
import { loadDefaultTenantConfig } from '@/saas/util'
export default {
  name: 'Login',
  components: {
    ThirdParty,
    ErCode,
    ReLogin,
    AccountLogin,
    TelLogin
  },
  data() {
    return {
      showCaptcha: false,
      reLoginVisible: false,
      reLoginData: {},
      reLogin: false,
      showSms: false,
      showPhone: true,
      loginType: 'STANDARD',
      loading: false,
      reload: false, //reloading标识
      erCodeVisible: false,
      codeVal: ''
    }
  },
  computed: {
    ...mapState([stateTypes.INTERFACE_CONFIG, stateTypes.LOGIN_STRATEGY])
  },
  created() {
    this.$store.dispatch(CLEAN_DATA)
    let loginStrategy = this.loginStrategy
    this.showPhone = loginStrategy.phone
    this.showSms = loginStrategy.secondFA
    if (this.$route.query.refresh) {
      this.reload = false
      const url = location.href.replace('?refresh=true', '')
      window.location.replace(url)
      return false
    }
  },
  mounted() {
    loadDefaultTenantConfig()
  },
  methods: {
    //接收第三方登录事件类型
    changeLoginType(val) {
      this.codeVal = val
      this.erCodeVisible = true
    },
    //接收子组件传值，返回账号登录
    toAccountLogin(val) {
      this.erCodeVisible = false
      this.loginType = val
    },
    //接收子组件传值，返回手机号登录
    toPhoneLogin(val) {
      this.erCodeVisible = false
      this.loginType = val
    },
    //进入双因子登录
    openReLogin(data) {
      this.reLoginData = { phone: data.phone }
      this.reLoginVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  // align-items: center;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;

  .login-bg {
    position: absolute;
    top: 8%;
    right: 8%;
    display: none;
    width: 36%;
    height: 80%;
  }

  .login-logo {
    width: 150px;
  }

  .login-left-section {
    position: relative;
    justify-content: center;
    width: 100%;
    height: 100%;

    .login-form-container {
      position: relative;
      width: 340px;

      ::v-deep .fks-tabs__header {
        margin-bottom: 44px;
      }

      ::v-deep .form-tab {
        .fks-tabs__nav-scroll {
          padding-bottom: 6px;
        }

        .fks-tabs__item {
          font-weight: 400;
          font-size: 20px;

          &.is-active {
            color: black;
          }
        }

        .fks-tabs__nav-wrap::after {
          background: none;
        }

        .fks-tabs__active-bar {
          bottom: -6px;
          width: 170px !important;
        }
      }

      ::v-deep .login-input {
        .fks-input__inner {
          height: 44px;
          border: none;
          border-bottom: 1px solid rgba(225, 226, 228, 1);
          border-radius: 0;
          font-size: 14px;
          text-indent: 16px;
        }
      }

      .button-text {
        font-size: 16px;
        color: black;
      }

      ::v-deep .fks-checkbox {
        &.is-checked {
          .fks-checkbox__label {
            color: #555;
          }
        }
      }
    }

    .login-form-container.captcha {
      margin-top: -200px;
    }
  }

  .captcha-input ::v-deep .fks-input__inner {
    height: 44px;
  }

  @media (min-width: 1280px) {
    .login-left-section {
      width: 60% !important;
    }

    .login-bg {
      display: block;
    }
  }
}
</style>